import { segmentedOpt } from "./helper";
import { Segmented, Dropdown } from "antd";
import winicoImg from "@/assets/winico.png";
import { useNavigate, useLocation } from "react-router-dom";
import { useState } from "react";
import classNames from 'classnames'

const titleBar = () => {
  const location = useLocation();
  const navigate = useNavigate();
  // 导航切换
  const onSegmentedChange = (value) => {
    navigate(value);
    setSegmentedVal(value);
  };

  const items = [
    {
      key: "1",
      label: "开发者工具",
    },
    {
      key: "2",
      label: "关于",
    },
  ];

  const onClickMenu = (e) => {
    if (e.key === "1") {
      electronAPI.openDevTools();
    } else if (e.key === "2") {
      electronAPI.openAboutWindow();
    }
  };

  const [segmentedVal, setSegmentedVal] = useState(location.pathname);

  const isMacOs = electronAPI.process.platform === "darwin";

  return (
    <>
      <div className={classNames('custom-titlebar', {'titlebar-center': isMacOs})}>
        <div className="title">
          <img src={winicoImg} />
          长安助手
        </div>
        <div className="action">
          <Segmented
            className={`exec-segmented exec-segmented-selected${
              segmentedOpt.findIndex((it) => it.value === segmentedVal) -
              segmentedOpt.length
            }`}
            options={segmentedOpt}
            onChange={(v) => {
              onSegmentedChange(v);
            }}
          />

          <div className="other-action">
            <div className="other-action-item">
              <Dropdown
                className="other-action-dropdown"
                menu={{ onClick: onClickMenu, items }}
                trigger={["click"]}
                getPopupContainer={(triggerNode) => triggerNode.parentNode}
              >
                <a onClick={(e) => e.preventDefault()}>帮助</a>
              </Dropdown>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default titleBar;
